<template>
  <!-- 家政公司详情页 -->
  <div class="company-page">
    <van-nav-bar left-text="家政平台" left-arrow @click-left="$router.back()" />

    <!-- 头部图片 -->
    <div class="img-card">
      <van-image
        src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607063865398&di=f2a8f49de6b9e6463928f09619c1ae75&imgtype=0&src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20161101%2F2c24affd6538495dbca8837023f53414_th.jpg"
      />
    </div>
    <!-- /头部图片 -->
    <!-- 客户数量 -->
    <div class="man_num">
      <div class="left-box">
        <div>1</div>
        <div class="child_1">注册家政员数</div>
      </div>
      <div class="right-box">
        <div>1000</div>
        <div class="child_2">已认证客户数数</div>
      </div>
      <van-button
        round
        type="info"
        :block="true"
        @click="onFollow"
        v-if="is_followed"
        >关注</van-button
      >
      <van-button
        round
        type="info"
        :block="true"
        @click="onFollow"
        v-else
        color="#999"
        >已关注</van-button
      >
    </div>
    <!-- /客户数量 -->
    <!-- 业务范围 -->
    <div class="scope">
      <div class="work">
        <div>业务范围</div>
      </div>
      <div class="wawa">
        <div class="yuesao">
          <van-image
            width="48"
            height="48"
            round
            src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607063771320&di=b425a16258117a39ab86cf556d64c07d&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180531%2Fe2daef1fe3c0424a92e6b6e29d76b69c.jpeg"
          />
          <span>月嫂</span>
        </div>
        <div class="yuesao">
          <van-image
            width="48"
            height="48"
            round
            src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607063877107&di=1413ad1b87e69d9a3da453223099190e&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_70%2Cc_zoom%2Cw_640%2Fimages%2F20180625%2F1a82d0b472f24646ab45714af585223b.jpeg"
          />
          <span>育婴师</span>
        </div>
        <div class="yuesao">
          <van-image
            width="48"
            height="48"
            round
            src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2667549633,1534926860&fm=26&gp=0.jpg"
          />
          <span>保姆</span>
        </div>
      </div>
    </div>
    <!--/ 业务范围 -->
    <!-- 公司资质 -->
    <div class="aptitude">
      <van-tabs v-model="active">
        <van-tab title="公司资料">
          <div class="zizhi-box">
            <div class="zizhi">公司资质</div>
            <div class="gongsizizhi-img">
              <van-image
                width="100"
                height="74"
                :src="item"
                v-for="(item, index) in company.certification"
                :key="index"
              />
            </div>
          </div>
          <div class="zizhi-box">
            <div class="zizhi">办公环境</div>
            <div class="gongsizizhi-img">
              <van-image
                width="100"
                height="74"
                :src="item"
                v-for="(item, index) in company.environment"
                :key="index"
              />
            </div>
          </div>
          <div class="zizhi-box">
            <div class="zizhi">获得荣誉</div>
            <div class="gongsizizhi-img">
              <van-image
                width="100"
                height="74"
                :src="item"
                v-for="(item, index) in company.rongyu"
                :key="index"
              />
            </div>
          </div>
          <div class="zizhi-box">
            <div class="zizhi">团队风采</div>
            <div class="gongsizizhi-img">
              <van-image
                width="100"
                height="74"
                :src="item"
                v-for="(item, index) in company.people"
                :key="index"
              />
            </div>
          </div>
          <!-- 基本资料 -->
          <div class="renzhijianli">
            <div class="renzhi">个人简介</div>
            <div class="shuxing">
              <div>任职公司：{{ company.name }}</div>
              <div>籍贯民族：汉族</div>
              <div>生肖属相：蛇</div>
              <div>星座：摩羯座（12.22~1.19）</div>
              <div>出生日期：1977-12-23</div>
              <div>学历：中专</div>
            </div>
          </div>
          <!-- /基本资料 -->
          <!-- 公司介绍 -->
          <div class="gongsijieshao">
            <div class="jieshao_com">公司介绍</div>
            <div class="jieshao_text">
              月子家政服务公司以家庭生活需求为导向，以资源的调整、整合为基础，以专业、便利的服务为手段，立足于系统解决和实现各类家政需求，引导客户家庭健康可持续发展、推动社会进步，公司致力于打造成为最具影响力的品质家政管理规范的制定者和中式家政服务的集成者。
            </div>
          </div>
          <!-- /公司介绍 -->
        </van-tab>
        <van-tab title="注册人员">
          <van-list>
            <servers-list
              v-for="(item, index) in serverWomenLiset"
              :showPingJia="true"
              :key="index"
              :servers="item"
            ></servers-list>
          </van-list>
        </van-tab>
      </van-tabs>
    </div>
    <!-- /公司资质 -->
    <!-- 底部栏目 -->
    <div class="bottom-box">
      <van-tabbar class="bottom-tabbar" :fixed="false">
        <van-tabbar-item>
          <i slot="icon" class="iconfont icon-fenxiang2"></i>
          <span class="text" @click="showShare = true">分享</span>
        </van-tabbar-item>
        <van-tabbar-item>
          <i slot="icon" class="iconfont icon-weixin"></i>
          <span class="text">微信联系</span>
        </van-tabbar-item>
        <van-tabbar-item>
          <i slot="icon" class="iconfont icon-dianhua"></i>
          <span class="text" @click="showPopup">电话联系</span>
        </van-tabbar-item>
        <van-tabbar-item icon="search">标签</van-tabbar-item>
        <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
        <van-tabbar-item icon="setting-o">分享 </van-tabbar-item>
      </van-tabbar>
    </div>
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
    />
    <!--/ 底部栏目 -->
    <!-- 拨打电话的弹出层 -->
    <van-popup v-model="showMobile" position="top" :style="{ height: '80%' }"
      >打电话</van-popup
    >
  </div>
</template>
<script>
import { getcompanysById } from '@/api/servers'
import { getBabySitter } from '@/api/home'
import ServersList from '@/components/servers-list'
export default {
  name: 'CompanyPage',
  components: {
    ServersList
  },
  data () {
    return {
      companyId: this.$route.params.companyId,
      company: '',
      is_followed: false,
      showShare: false,
      showMobile: false,
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' }
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' }
        ]
      ],
      serverWomenLiset: [],
      active: 0
    }
  },
  created () {
    this.loadCompanysById()
    this.loadServers()
  },
  methods: {
    async loadCompanysById () {
      const { data } = await getcompanysById(this.companyId)
      // console.log('sdgtg', data)
      this.company = data[0]
      // console.log(this.company)
    },
    onFollow () {
      this.is_followed = !this.is_followed
      if (this.is_followed) {
        this.$toast('取消关注 !')
      } else {
        this.$toast('关注成功 !')
      }
    },
    // 拨打电话
    showPopup () {
      // this.showMobile = true
      window.location.href = 'tel:13922331122'
    },
    // 展示注册人员
    async loadServers () {
      try {
        const { data } = await getBabySitter()
        this.serverWomenLiset = data
      } catch (err) {
        this.$toast.fail('获取失败')
      }
    }
  }
}

</script>
<style lang="less" scoped>
.company-page {
  position: relative;
  background-color: #f8f8f8;
  padding-bottom: 140px;
  .van-nav-bar {
    height: 180px;
    background-color: #3f51b5;
    /deep/ .van-icon-arrow-left::before {
      margin-top: 40px;
    }
    /deep/ .van-nav-bar__text {
      color: #fff;
      font-size: 35px;
      line-height: 180px;
      margin-top: 40px;
    }
    /deep/ .van-icon-arrow-left::before {
      color: #fff;
      font-size: 45px;
    }
  }
  // 头部图片
  .img-card {
    position: relative;
    width: 674px;
    height: 302px;
    background-color: #fff;
    margin: 0 auto;
    border-radius: 8px;
    box-sizing: border-box;
    margin-bottom: 20px;
    .van-image {
      width: 674px;
      height: 342px;
      position: absolute;
      top: -40px;
      width: 100%;
      z-index: 3;
    }
  }
  //第二个方块
  .man_num {
    position: relative;
    display: flex;
    width: 674px;
    height: 292px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 8px;
    padding-top: 48px;
    box-sizing: border-box;
    .left-box {
      flex: 1;
      div {
        font-size: 48px;
        font-weight: 600;
        color: #3f51b5;
        text-align: center;
      }
      .child_1 {
        font-size: 26px;
        color: #101010;
        text-align: center;
        margin-top: 18px;
        font-weight: 500;
      }
    }
    .right-box {
      float: left;
      flex: 1;
      div {
        font-size: 48px;
        font-weight: 600;
        text-align: center;
        color: #3f51b5;
      }
      .child_2 {
        font-size: 26px;
        color: #101010;
        margin-top: 14px;
        font-weight: 500;
        text-align: center;
      }
    }
    .right-box::before {
      float: left;
      content: '';
      display: block;
      width: 1px;
      height: 68px;
      background-color: #e5e5e5;
      transform: translateY(50%);
    }
    .van-button {
      position: absolute;
      bottom: 50px;
      width: 152px;
      height: 50px;
      left: 262px;
      background-color: #3f51b5;
      border: 0;
    }
  }
  //第三个方块
  .scope {
    margin: 0 auto;
    width: 674px;
    height: 326px;
    background-color: #fff;
    border-radius: 8px;
    margin-top: 20px;
    .work {
      box-sizing: border-box;
      width: 100%;
      height: 106px;
      font-size: 28px;
      margin-left: 26px;
      padding: 36px 0;
      border-bottom: 2px solid #e5e5e5;
      margin-bottom: 32px;
      div {
        height: 30px;
        border-left: 8px solid #3f51b5;
        padding-left: 20px;
        vertical-align: bottom;
      }
    }
    .wawa {
      padding-left: 22px;
      display: flex;
      .yuesao {
        display: flex;
        flex-direction: column;
        margin-right: 54px;
        span {
          font-size: 26px;
          margin-left: 20px;
        }
      }
    }
  }
  // 第四个方块
  .aptitude {
    // position: absolute;
    margin: 0 auto;
    margin-top: 30px;
    width: 674px;
    // height: 888px;
    background-color: #fff;

    border-radius: 8px;
    box-sizing: border-box;
    padding: 0 30px;
    .zizhi-box {
      box-sizing: border-box;
      font-size: 28px;
      box-sizing: border-box;
      .zizhi {
        height: 30px;
        border-left: 8px solid #3f51b5;
        padding-left: 20px;
        vertical-align: bottom;
        color: #101010;
        margin-bottom: 40px;
      }
      .gongsizizhi-img {
        display: flex;
        margin-bottom: 45px;
        .van-image {
          margin-left: 10px;
          flex: 1;
        }
      }
    }
    .renzhijianli {
      box-sizing: border-box;
    }
    .renzhi {
      height: 30px;
      border-left: 8px solid #3f51b5;
      font-size: 28px;
      padding-left: 20px;
      margin-bottom: 30px;
      margin-top: 20px;
    }
    .shuxing {
      height: 264px;
      font-size: 24px;
      color: #7b7777;
      margin-left: 20px;
      margin-bottom: 30px;
      div {
        margin-bottom: 15px;
      }
    }
    .gongsijieshao {
      box-sizing: border-box;
    }
    .jieshao_com {
      height: 30px;
      border-left: 8px solid #3f51b5;
      font-size: 28px;
      padding-left: 20px;
      margin-bottom: 30px;
      margin-top: 20px;
    }
    .jieshao_text {
      box-sizing: border-box;
      font-size: 24px;
      color: #7b7777;
      padding-bottom: 24px;
    }
  }
  // 底部栏目
  .bottom-box {
    width: 750px;
    // height: 134px;
    position: fixed;
    left: 0;
    bottom: 0;
    .bottom-tabbar {
      padding: 10px 0;
      .iconfont {
        font-size: 40px;
      }
      span.text {
        font-size: 12px;
      }
    }
    .van-tabbar-item--active {
      color: #646566;
    }
  }
}
</style>
